<template>
  <div class="w-full h-full overflow-auto bg-white-soft">
    <div class="mt-6">
      <div class="ui FHContainer">
        <div class="FHMain">
          <div class="FHContent has-aside flex flex-row">
            <div class="content">
              <!--面包屑-->
              <el-breadcrumb separator="/" class="mb-5">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>搜索</el-breadcrumb-item>
                <el-breadcrumb-item>{{ searchTitle }}</el-breadcrumb-item>
              </el-breadcrumb>
              <div v-if="dataLoaded">
                <el-row :gutter="20" v-if="articles?.length > 0">
                  <el-col :xs="24" :sm="12" :lg="8"  v-for="article in articles" v-if="articles?.length > 0">
                    <div class="mx-3 my-3">
                      <div class="bg-white rounded-lg overflow-hidden">
                        <div class="h-[140px] overflow-hidden" v-if="!isEmptyString(article.coverImage)">
                          <RouterLink class="guide-a" :to="'/article/detail/' + article.id">
                            <el-image :src="getDownloadUrl(article.coverImage)" fit="cover"
                                      class="article-item-image h-full w-full "></el-image>
                          </RouterLink>
                        </div>
                        <RouterLink class="guide-a" :to="'/article/detail/' + article.id">
                          <div class="px-4 py-4"><h3 class="text-lg line-clamp-2 hover-primary h-[56px]"
                                                     :title="article.title">{{ article.title }}</h3></div>
                        </RouterLink>
                        <!--浏览信息-->
                        <div class="flex-1 flex justify-items-end  px-4 mb-2">
                                <span title="浏览量" class="flex items-center text-gray-400"><el-icon
                                    color="var(--color-gray-400)" class="mr-0.5"><View/></el-icon> {{
                                    formatNumberSimple(article.viewCount)
                                  }}</span>
                          <span title="点赞数" class="flex items-center text-gray-400 ml-4"><img alt="Icon"
                                                                                                 width="14"
                                                                                                 height="14"
                                                                                                 src="/svg/good.svg"
                                                                                                 class="mr-0.5"/> {{
                              formatNumberSimple(article.starCount)
                            }}</span>
                          <span title="评论数" class="flex items-center text-gray-400 ml-4"><el-icon
                              color="var(--color-gray-400)" class="mr-0.5"><ChatLineRound/></el-icon> {{
                              formatNumberSimple(article.commentCount)
                            }}</span>
                        </div>
                        <div class="border-t px-4 py-3 flex flex-row items-center justify-between">
                          <RouterLink :to="'/user/center/' + article.authorId" class="flex items-center">
                            <UserAvatar :size="18" :file-id="article.authorAvatar"></UserAvatar>
                            <span class="ml-1 text-sm hover-primary">{{ article.authorName }}</span></RouterLink>
                          <span class="text-sm">{{ formatDateStr(article.publishedTime, '{y}年{m}月{d}日') }}</span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
                <el-empty v-else description="抱歉，你搜索的内容未找到，请尝试使用其他关键词搜索。"></el-empty>
              </div>
              <el-skeleton v-else/>
              <div class="text-center" v-if="articleHasMore">
                <el-button type="primary" :loading="loadingMoreArticle" plain
                           @click="loadMoreArticle()">点击查看更多
                </el-button>
              </div>
            </div>
            <div class="aside">
              <!--最近文章-->
              <RecentArticleList :articleList="recentArticle" class="mt-3"></RecentArticleList>
              <!--分类目录-->
              <ArticleCategory :article-category="articleCategory"></ArticleCategory>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {
  ArticleCategoryCountResp,
  ArticlePageReq,
  ArticlePageResp,
  ArticleRecentReq,
  ArticleRecentResp
} from '@/api/article/types'
import {isEmptyString} from "@/utils/string";
import {countArticleCategory, pageArticle, queryRecentArticle} from "@/api/article";
import {formatDateStr} from "@/utils/time";
import {formatNumberSimple} from "@/utils/math";
import {ElMessage} from "element-plus";
import * as FileApis from "@/api/file"
import {getDownloadUrl} from "@/api/file";
import ArticleCategory from "@/components/article/ArticleCategory.vue";
import UserAvatar from "@/components/common/UserAvatar.vue";
import RecentArticleList from "@/components/article/RecentArticleList.vue";

const route = useRoute()
const router = useRouter()
const dataLoaded = ref(false)
const searchTitle = ref("")
//文章
const articles = ref<ArticlePageResp[]>([])
const articleMoreLoading = ref(false)
const articleHasMore = ref(false)
const loadingMoreArticle = ref(false)
const articlePage = ref(1)
//最近文章
const recentArticle = ref<ArticleRecentResp[]>([])
//文章分类
const articleCategory = ref<ArticleCategoryCountResp[]>([])

//加载文章列表
const loadArticleList = () => {
  const req: ArticlePageReq = {
    current: 1,
    size: 10,
    titleLike: searchTitle.value
  }
  articleMoreLoading.value = true
  pageArticle(req).then(result => {
    articleHasMore.value = result.pages > result.current
    articles.value = result.records
    articleMoreLoading.value = false
    if (!dataLoaded.value) dataLoaded.value = true
  })
}

const loadMoreArticle = () => {
  articlePage.value++
  const req: ArticlePageReq = {
    current: articlePage.value,
    size: 10,
    titleLike: searchTitle.value
  }
  loadingMoreArticle.value = true
  pageArticle(req).then(result => {
    articleHasMore.value = result.pages > result.current
    articles.value.push(...result.records)
    loadingMoreArticle.value = false
  })
}

//加载最近文章
const loadRecentArticleList = () => {
  queryRecentArticle({}).then(result => {
    recentArticle.value = result
  })
}
//加载分类列表
const loadArticleCategory = () => {
  countArticleCategory({}).then(result => {
    articleCategory.value = result
  })
}

onMounted(() => {
  searchTitle.value = String(route.query.s)
  loadArticleList()
  loadRecentArticleList()
  loadArticleCategory()
})
</script>

<style>
</style>